
.magicalcoder-dragging .magical-coder-tmp{
    position: relative;
    /*background-color: #33383E;*/
    overflow: hidden;
    cursor: move;
    min-width: 10px;
    min-height: 10px;
}

/* 为了预览能看到 */

.magicalcoder-dragging .mc-root{
    border: 1px dashed #988;
    padding: 0px 10px 0px 0px;
}
.mc-root{
    overflow: auto;
}

body{
    background-color:#F2F3F7!important;
    overflow: hidden;
}

.mc-window{
    min-height: 100% !important;
}
/*当鼠标悬停元素给加个边框*/
.mc-boder:not(.mc-root){
    border: 1px solid #a0a0a0;
}
/*当拖拽的时候，把之前隐藏的元素*/
.magicalcoder-dragging .drag-mc-pane:not(.mc-root){
	border: 1px solid #a0a0a0;
	padding: 12px;
	min-width: 5px;
	min-height: 60px;/*保证内部有高度方便其他控件拖入*/
	margin-top:5px;
}
/*拖拽期间 隐藏掉li的点样式*/
li.magicalcoder-page-drag-item-label {
    height: 30px;
    width: 88px;
    background-color: #33383E;
}
/*表格显示的很小*/
.magicalcoder-dragging td.drag-mc-pane{
    padding: 20px;
}

/*绝对定位样式优化 */
/*本身别有padding 别有margin否则子元素对不齐*/
.magicalcoder-dragging .magical-coder-layui-absolute-pane.drag-mc-pane{
    padding: 0px!important;
    margin-top:0px!important;
}
/*他的孩子都不用margin它 否则也对不齐*/
.magicalcoder-dragging .magical-coder-layui-absolute-pane .drag-mc-pane{
    margin-top:0px!important;
}
/*临时包裹标签*/
.magicalcoder-dragging span.magicalcoder-tmp-wrap,.magicalcoder-dragging span.magical-coder-layui-tmp-pane{
	padding: 5px;
	border: 1px solid #c9cadd;
	display: inline-block;/*这样拖拽的时候就能让span的宽 高生效了*/
}
.magicalcoder-dragging  div.magicalcoder-tmp-wrap,.magicalcoder-dragging  div.magical-coder-layui-tmp-pane{
	padding: 5px;
	border: 1px solid #c9cadd;
	display: block;/*这样拖拽的时候就能让span的宽 高生效了*/
}

 /*自定义的表格样式 视图区域显示列*/
.magicalcoder-dragging .magicalcoder-table-th{
    display: inline-block;
}
/*自定义的表格样式 预览区域隐藏列*/
.magicalcoder-table-th{
    display: none;
}
/*错误警告*/
.magicalcoder-dragging .magicalcoder-error{
    animation: error-star 800ms ease-out infinite alternate;
}
/*警告*/
.magicalcoder-dragging .magicalcoder-warn{
    animation: warn-star 800ms ease-out infinite alternate;
}
/*辅助按钮容器*/
.magicalcoder-dragging .magicalcoder-assist-container{
    position: relative;
}
/*辅助图标预览不显示*/
.magicalcoder-assist{
    display: none;
}
/*视图模式显示出来*/
.magicalcoder-dragging .magicalcoder-assist{
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
}
.magicalcoder-dragging .magicalcoder-assist i{
    font-size: 20px;
    margin: 2px;
    cursor: pointer;
}

.magicalcoder-dragging .magicalcoder-assist i.mc-assist-add{
    color: #307AFF;
}
.magicalcoder-dragging .magicalcoder-assist i.mc-assist-duplicate{
    color: #307AFF;
}
.magicalcoder-dragging .magicalcoder-assist i.mc-assist-delete{
    color: red;
}
.magicalcoder-dragging .magicalcoder-assist i.mc-assist-help{
    color: red;
}
@keyframes error-star {
    0% {
        border-color: #991309;
        box-shadow: 0 0 0 rgba(255, 62, 18, 0.2), inset 0 0 0 rgba(255, 16, 89, 0.1), 0 0 0 #990907;
    }
    100% {
        border-color: #ff681a;
        box-shadow: 0 0 10px rgba(255, 53, 15, 0.6), inset 0 0 0 rgba(255, 27, 146, 0.4), 0 0 0 #ff0e13;
    }
}
@keyframes warn-star {
    0% {
        border-color: #998710;
        box-shadow: 0 0 0 rgba(255, 204, 48, 0.2), inset 0 0 0 rgba(255, 183, 36, 0.1), 0 0 0 #998118;
    }
    100% {
        border-color: #ffa31e;
        box-shadow: 0 0 10px rgba(255, 192, 30, 0.6), inset 0 0 0 rgba(255, 218, 35, 0.4), 0 0 0 #ffd017;
    }
}
/*拖拽时 缩小下区域 容易放置*/
.drag-mc-pane:not(.mc-ui-absolute-pane)>.drag-view{
	overflow: hidden;/*超出区域隐藏 体验更好了*/
	background-color: #24292E !important;;
	background: #24292E !important;;
	border: 1px dashed #307AFF !important;;
	padding:0px !important;/*临时把drag-mc-pane设置失效 否则表现跟大家不一样*/
	width:15px !important;;
	height: 15px !important;
	min-width: 15px !important;
	min-height: 15px !important;
	max-width: 15px !important;
	max-height: 15px !important;
	opacity: 1 !important;;
	z-index: 999999999 !important;;/*最前置顶 不可删除*/
    display: inline-block;
}


.sortable-drag{
    opacity: 1 !important;
    border:1px solid #40474E !important;
}
/*重新layui样式 太窄了 加上边框后 修复聚焦后 宽会超出 换行了*/
.layui-form-label{
    width:78px;
}
/*===============工作台 end    ==============*/

/*左侧内容拖拽到中间区域 把文字隐藏*/
 .magicalcoder-page-drag-item-label>a{
	display: none;
}
.magicalcoder-hide{
	 display: none;
}


/*统一强制样式操作 优先级最高*/
/*想要样式强制生效 选这个*/
.magicalcoder-focus-border,.magicalcoder-focus-border:focus,.magicalcoder-focus-border:hover{
	 border: 1px dashed #409eff !important;
     border-color:#409eff !important;
}
.magicalcoder-focus-parent-border:not(.mc-root){
	border: 2px dashed #ffdb3f !important;
    border-color: #ffdb3f !important;
    animation: focus-parent-border-star 800ms ease-out infinite alternate !important;
}
@keyframes focus-parent-border-star {
    0% {
        border-color: #ffdb3f;
        box-shadow: 0 0 0 #ffdb3f, inset 0 0 0 #ffdb3f, 0 0 0 #ffdb3f;
    }
    100% {
        border-color: #ffdb3f;
        box-shadow: 0 0 10px #ffdb3f, inset 0 0 0 #ffdb3f, 0 0 0 #ffdb3f;
    }
}
.magicalcoder-focus-parent-not-allow-border{
	border: 2px dashed #dbe0ff !important;
    animation: fade 600ms infinite;
    -webkit-animation: fade 600ms infinite;
    animation: focus-parent-not-border-star 800ms ease-out infinite alternate !important;

}
@keyframes focus-parent-not-border-star {
    0% {
        border-color: #dbe0ff;
        box-shadow: 0 0 0 #dbe0ff, inset 0 0 0 #dbe0ff, 0 0 0 #dbe0ff;
    }
    100% {
        border-color: #dbe0ff;
        box-shadow: 0 0 10px #dbe0ff, inset 0 0 0 #dbe0ff, 0 0 0 #dbe0ff;
    }
}
/*td layui 1px不行*/

.layui-table td.magicalcoder-focus-border,
.layui-table th.magicalcoder-focus-border,
.layui-table tr.magicalcoder-focus-border,
.layui-table table.magicalcoder-focus-border{
    border: 2px dashed #409eff !important;
}
/*修复拖拽大小聚焦时自动加的滚动条 体验不好*/
.layui-btn{
    overflow: hidden;
}
.mc-table td.magicalcoder-focus-border,
.mc-table th.magicalcoder-focus-border,
.mc-table tr.magicalcoder-focus-border,
.mc-table table.magicalcoder-focus-border{
    border: 2px dashed #409eff !important;
}

td.magicalcoder-focus-border,
th.magicalcoder-focus-border,
tr.magicalcoder-focus-border,
table.magicalcoder-focus-border{
	border: 1px dashed #409eff !important;
}


/*缩放*/
.magicalcoder-zoom{
    max-height: 100px;
    min-height: 40px;
    background-color:#cfc7c7;
}
/*辅助图标不隐藏*/
.magicalcoder-zoom .magicalcoder-assist{
    display: inline-block;
}
.magicalcoder-zoom .magicalcoder-assist i{
    display: inline-block;
}

.magicalcoder-zoom::after{
    content: "缩放状态" !important;
    /*background-color: #F5F5F5;*/
    border-radius: 4px 0 4px 0;
    color: #9DA0A4;
    font-size: 12px;
    font-weight: bold;
    right: -1px;
    line-height:2;
    /*padding: 3px 7px;
    position: absolute;*/
    /*top: -1px;*/
}
.magicalcoder-zoom div{
    display:none;
}
.magicalcoder-zoom span{
    display:none;
}
.magicalcoder-zoom form{
    display:none;
}
.magicalcoder-zoom label{
    display:none;
}
.magicalcoder-zoom ul{
    display:none;
}
.magicalcoder-zoom li{
    display:none;
}
.magicalcoder-zoom ol{
    display:none;
}
.magicalcoder-zoom table{
    display:none;
}
.magicalcoder-zoom tbody{
    display:none;
}
.magicalcoder-zoom thead{
    display:none;
}
.magicalcoder-zoom tfoot{
    display:none;
}
.magicalcoder-zoom tr{
    display:none;
}
.magicalcoder-zoom td{
    display:none;
}
.magicalcoder-zoom th{
    display:none;
}
/*form*/
.magicalcoder-zoom button{
    display:none;
}
.magicalcoder-zoom input{
    display:none;
}
.magicalcoder-zoom textarea{
    display:none;
}
.magicalcoder-zoom select{
    display:none;
}
.magicalcoder-zoom a{
    display:none;
}
.magicalcoder-zoom img{
    display:none;
}
.magicalcoder-zoom i{
    display:none;
}
.magicalcoder-zoom blockquote{
    display:none;
}
.magicalcoder-zoom hr{
    display:none;
}
.magicalcoder-zoom pre{
    display:none;
}
.magicalcoder-zoom code{
    display:none;
}

/*定义chrome滚动条样式*/
::-webkit-scrollbar {/*滚动条整体样式*/
    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 3px;
   /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background-color: grey;
}
::-webkit-scrollbar-track {/*滚动条里面轨道 根据背景色自适应*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    border-radius: 3px;
    /*background-color: #24292E;*/
}
/*定义ie滚动条样式*/
body{
    /*三角箭头的颜色*/
    scrollbar-arrow-color: #4E565D;
    /*滚动条滑块按钮的颜色*/
    scrollbar-face-color: #4E565D;
    /*滚动条整体颜色*/
    /*scrollbar-highlight-color: #333;*/
    /*滚动条阴影*/
    scrollbar-shadow-color: #24292E;
    /*滚动条轨道颜色*/
    scrollbar-track-color: #24292E;
}

/*扩展配置里面的图标*/
.magicalcoder-extend-icons{margin-bottom: 50px; font-size: 0;}
.magicalcoder-extend-icons li{display: inline-block; vertical-align: middle; width: 60px; height: 30px; line-height: 25px; padding: 20px 0; margin-right: -1px; margin-bottom: -1px; border: 1px solid #e2e2e2; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;}
.magicalcoder-antd-extend-icons li{ height: 60px; }
.site-doc-anim li{height: auto;}
.magicalcoder-extend-icons li i{display: inline-block; font-size: 36px;cursor: pointer}
.magicalcoder-antd-extend-icons li i{margin-top:-10px}

.magicalcoder-extend-icons li:hover{background-color: #f2f2f2; color: #000;}
.magicalcoder-extend-icons i.active{
    color: #307AFF;
}
/*绝对定位样式优化 */
/*本身别有padding 别有margin否则子元素对不齐*/
.magicalcoder-dragging .mc-ui-absolute-pane.drag-mc-pane{
    padding: 0px!important;
    margin-top:0px!important;
    overflow-x: hidden;
}
/*他的孩子都不用margin它 否则也对不齐*/
.magicalcoder-dragging .mc-ui-absolute-pane .drag-mc-pane{
    margin-top:0px!important;
}
/*当在绝对定位面板移动时 隐藏黑点 这样漂亮很多*/
/*.mc-ui-absolute-pane>.drag-view,
.mc-ui-absolute-pane>li.magical-drag-drop-chosen
{
    display: none !important;
}*/
/* 解决当td是自由定位时 拖拽放手后 top的值偏差 默认是center导致offsetY值减了 千万别删除 */
td.mc-ui-absolute-pane{
    vertical-align: top;
    text-align:left;
    /* min-width: 100% !important; */
}




/*拖拽调整宽高*/
.magical_resize_s_resize,.magical_resize_s_resize .el-input__inner,.magical_resize_s_resize>input{
    cursor:s-resize !important;
    /*优化拖拽宽高时 隐藏进度条 否则没法拖拽*/
    overflow-x: hidden !important;
}
.magical_resize_e_resize,.magical_resize_e_resize .el-input__inner,.magical_resize_e_resize>input{
    cursor: e-resize !important;
    /*优化拖拽宽高时 隐藏进度条 否则没法拖拽*/
    overflow-y: hidden !important;
}
.magical_resize_se_resize,.magical_resize_se_resize .el-input__inner,.magical_resize_se_resize>input{
    cursor: se-resize !important;
    /*优化拖拽宽高时 隐藏进度条 否则没法拖拽*/
    overflow: hidden !important;
}


/*拖拽辅助线*/
.drag-mc-ui:not(.mc-ui-absolute-pane)>.mc-drag-line-rect{
    display: none;
}
.mc-drag-line-rect{
    position: absolute;
}

.mc-drag-line-h0{
    position: absolute;
    top:50%;
    border-top:1px dashed #ff5c18;
    display: none;
}
.mc-drag-line-h1{
    position: absolute;
    top:0px;
    border-top:1px dashed #ff5c18;
}
.mc-drag-line-h2{
    position: absolute;
    bottom:0px;
    border-top:1px dashed #ff5c18;
}
.mc-drag-line-v0{
    position: absolute;
    left:50%;
    border-left:1px dashed #ff5c18;
    display: none;
}
.mc-drag-line-v1{
    position: absolute;
    left:0px;
    border-left:1px dashed #ff5c18;
}
.mc-drag-line-v2{
    position: absolute;
    right:0px;
    border-left:1px dashed #ff5c18;
}
.mc-drag-align-h{
    display: block;
    border-top:1px dashed #307AFF;
}
.mc-drag-align-v{
    display: block;
    border-left:1px dashed #307AFF;
}
.mc-net-line{
     display: none;
    z-index: -999999
}
.mc-align-with-me{
    border: 1px solid #a0a0a0 !important;
    border-color: #a0a0a0 !important;
    animation: mc-align-with-me-star 800ms ease-out infinite alternate !important;
}
@keyframes mc-align-with-me-star {
    0% {
        border-color: #a0a0a0;
        box-shadow: 0 0 0 #a0a0a0, inset 0 0 0 #a0a0a0, 0 0 0 #a0a0a0;
    }
    100% {
        border-color: #a0a0a0;
        box-shadow: 0 0 10px #a0a0a0, inset 0 0 0 #a0a0a0, 0 0 0 #a0a0a0;
    }
}
/* 网格 */
.magicalcoder-dragging .mc-net-line{
    display: block;
    position: fixed;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
}

/*用fixed才能遮盖主全部，当出现滚动条也能遮盖 用absolute就不行了 滚动条出现无法新展出的内容*/
.mc-ui-absolute-pane>.mc-shade{
    position: fixed;
}
/*下面这个是包裹标签下的shade不能用fixed*/
.magical-coder-tmp>.mc-shade{
    position: absolute;
}
.mc-shade{
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    z-index: 9999;
}

/* select被包裹起来看不到下拉 因为magical-coder-tmp的overflow:hide了; */
.magicalcoder-dragging .mc-dragging-select{
    /*unset开源不设置*/
    overflow: unset;
}

/* 利用此下面2条规则来试探是否能拖拽插入 还是自由定位 默认的被mc-shade遮盖了 所以拖拽无碍*/
.mc-ui-absolute-pane>.mc-shade{
    z-index: 9999;
}
.mc-ui-absolute-pane .drag-mc-pane{
    z-index: 10000;
}

/* layui */
.mc-ui-absolute-pane>.layui-tab,
.mc-ui-absolute-pane>.layui-carousel,
.mc-ui-absolute-pane>.layui-elem-field,
.mc-ui-absolute-pane>.layui-collapse,
.mc-ui-absolute-pane>.layui-card
{
    z-index: 10000;
}
/* element */
.mc-ui-absolute-pane>.el-carousel,
.mc-ui-absolute-pane>.el-card,
.mc-ui-absolute-pane>.el-tabs
{
    z-index: 10000;
}
/* antd*/
.mc-ui-absolute-pane>.ant-carousel,
.mc-ui-absolute-pane>.ant-card,
.mc-ui-absolute-pane>.ant-tabs
{
    z-index: 10000;
}
/* miniui */
.mc-ui-absolute-pane>.row,
.mc-ui-absolute-pane>.ant-tabs
{
    z-index: 10000;
}


.mc-resize-p {
    position: absolute;
    /*box-shadow: 0 0 0 1px #1e9ffe; */
    z-index: 99999;
}

.mc-resize-p1,
.mc-resize-p2,
.mc-resize-p3,
.mc-resize-p4,
.mc-resize-p5,
.mc-resize-p6,
.mc-resize-p7,
.mc-resize-p8 {
    height: 10px;
    width: 10px;
    position: absolute;
    background-color:#1e9fff;
}

.mc-resize-p1 {
    cursor: nw-resize;
    top: -4.5px;
    left: -4.5px;
}

.mc-resize-p2 {
    cursor: ne-resize;
    top: -4.5px;
    right: -4.5px;
}

.mc-resize-p3 {
    cursor: ne-resize;
    bottom: -4.5px;
    left: -4.5px;
}

.mc-resize-p4 {
    cursor: nw-resize;
    bottom: -4.5px;
    right: -4.5px;
}

.mc-resize-p5 {
    cursor: n-resize;
    top: -4.5px;
    right: 0;
    left: 0;
    margin: auto;
}

.mc-resize-p6 {
    cursor: e-resize;
    bottom: 0;
    right: -4.5px;
    top: 0;
    margin: auto 0;
}

.mc-resize-p7 {
    cursor: n-resize;
    bottom: -4.5px;
    right: 0;
    left: 0;
    margin: auto;
}

.mc-resize-p8 {
    cursor: e-resize;
    bottom: 0;
    left: -4.5px;
    top: 0;
    margin: auto 0;
}

.mc-resize-p9 {
    background-position: center;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
    position: absolute;
    background-color: #1e9fff;
    right: -40px;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: move;
    border-radius: 100%;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg t="1587570236384" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4872" data-spm-anchor-id="a313x.7781069.0.i2" width="200" height="200"><path d="M510.065778 0C290.076444 0 94.549333 135.850667 23.438222 338.033778l69.518222 23.096889C153.770667 187.733333 321.479111 71.395556 510.065778 71.395556c218.225778 0 399.928889 154.965333 434.631111 357.660444l-63.260445-41.016889-40.732444 59.392 126.407111 81.863111c11.320889 7.281778 25.713778 7.964444 37.660445 1.706667A35.555556 35.555556 0 0 0 1024.170667 499.655111C1024.170667 224.142222 793.543111 0 510.065778 0z m4.209778 952.604444c-218.225778 0-399.928889-154.965333-434.631112-357.660444l63.260445 41.016889 40.732444-59.392-126.350222-81.863111a37.660444 37.660444 0 0 0-37.717333-1.706667 35.498667 35.498667 0 0 0-19.399111 31.402667C0.170667 799.857778 230.798222 1024 514.275556 1024c220.046222 0 415.573333-135.850667 486.627555-338.033778l-69.518222-23.096889c-60.871111 173.340444-228.522667 289.735111-417.109333 289.735111z" fill="#1296db" p-id="4873"></path></svg>');
    background-size: 12px 12px;
}

.mc-resize-p9::after {
    content: "";
    width: 15px;
    position: absolute;
    top: 10px;
    left: -16px;
    background-color: #1e9fff;
    height: 1px;
}

.mc-resize-pm {
    height: 100%;
    width: 100%;
    cursor: move;
}
